<!doctype html>
<html lang="en">


<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  <!-- <script src="/static/js/tailwindcss-3.4.5.js"></script> -->
</head>

<body>
  <div id="app"  class="container">
    <div class="text-center">
      <img id="id_image_uploaded" :src="demo_image_url" class="img-thumbnail" width="120" height="120" />
    </div>
    <ul>
      <li>age: <span>{% raw %}{{ age }}{% endraw %}</span></li>
      <li>gender: <span>{% raw %}{{ gender }}{% endraw %}</span></li>
      <li>angel pitch: <span>{% raw %}{{ angel_pitch }}{% endraw %}</span></li>
      <li>angel roll: <span>{% raw %}{{ angel_roll }}{% endraw %}</span></li>
      <li>angel yaw: <span>{% raw %}{{ angel_yaw }}{% endraw %}</span></li>
      <li>face_feature: <span>{% raw %}{{ face_feature }}{% endraw %}</span></li>
      <li>face_feature_size: <span>{% raw %}{{ face_feature_size }}{% endraw %}</span></li>
    </ul>

    <form @submit.prevent="submitForm" class="table">
      <table>
        <tr>
          <td>上传文件</td>
          <td><input type="file" name="file" @change="handleFileChange"></td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="submit" />
            <input type="reset" />
          </td>
        </tr>
      </table>

    </form>


  </div>


  <script src="/static/js/vue.global.js"></script>
  <script>
    const { createApp, ref } = Vue

    var vm = createApp({
      setup() {
        const message = ref('Hello vue!!!');
        const selectedFile = ref('...');
        const demo_image_url = ref('static/uploads/liuyifei-1.jpg');
        const age = ref('');
        const gender = ref('');
        const angel_pitch = ref('');
        const angel_roll = ref('');
        const angel_yaw = ref('')
        const face_feature = ref('');
        const face_feature_size = ref('');
        const responseData = ref(null);

        return {
          message,
          selectedFile,
          demo_image_url,
          age,
          gender,
          face_feature,
          face_feature_size,
          angel_pitch,
          angel_roll,
          angel_yaw,
          responseData
        }
      },
      methods: {
        handleFileChange(e) {
          this.selectedFile = e.target.files[0];
          console.log(this.selectedFile);
        },
        submitForm() {
          const formData = new FormData();
          formData.append('file', this.selectedFile, this.selectedFile.name);

          fetch('/upload_file', {
            method: 'POST',
            body: formData
          })
            .then(response => response.json()) // 将返回结果转为JSON格式
            .then(data => {
              console.log(data);
              this.age = data.age;
              this.gender = data.gender;
              this.angel_pitch = data.face_angel_pitch;
              this.angel_roll = data.face_angel_roll;
              this.angel_yaw = data.face_angel_yaw;
              this.face_feature = data.face_feature;
              this.face_feature_size = data.face_feature_size;
              this.demo_image_url = data.errmsg;
            })
            .catch(error => console.log(error)); // 处理错误情况
        }
      },
    }).mount('#app')
  </script>
</body>

</html>